﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/axios.js"></script>
    <script src="~/Scripts/ElementUI/element-ui.js"></script>
    <link href="~/Content/ElementUI/element-ui.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        @* 头部 *@
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.pname" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="总得分">
                <el-input v-model="formInline.pscore"></el-input>
            </el-form-item>
            <el-form-item label="~">
                <el-input v-model="formInline.pscore1"></el-input>
            </el-form-item>
            <el-form-item label="所属球队">
                <el-select v-model="formInline.tid">
                    <el-option label="=所属球队=" value=""></el-option>
                    <el-option v-for="type in getList" :label="type.tname" :value="type.tid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="dialogFormVisible = true">新增</el-button>
            </el-form-item>
        </el-form>
        @* 表格 *@
        <template>
            <el-table :data="tableData"
                      border
                      style="width: 100%">
                <el-table-column prop="pid"
                                 label="序号"
                                 width="180">
                </el-table-column>
                <el-table-column prop="pname"
                                 label="球员"
                                 width="180">
                </el-table-column>
                <el-table-column prop="ptime"
                                 label="生日">
                </el-table-column>
                <el-table-column prop="pscore"
                                 label="总得分"
                                 width="180">
                </el-table-column>
                <el-table-column prop="tname"
                                 label="球队"
                                 width="180">
                </el-table-column>
            </el-table>
        </template>
        @* 分页 *@
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count">
        </el-pagination>
        @* 新增 *@
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules">
                <el-form-item label="球员姓名" prop="pname" :label-width="formLabelWidth">
                    <el-input v-model="form.pname" auto-complete="off"></el-input>
                </el-form-item>
                <div class="block">
                    <span class="demonstration">出生日期</span>
                    <el-date-picker v-model="form.ptime"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>
                </div>
                <el-form-item label="出生日期" prop="date1" :label-width="formLabelWidth">
                    <el-input v-model="form.ptime" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属球队" prop="date2">
                    <el-select v-model="form.tid">
                        <el-option label="=所属球队=" value=""></el-option>.+
                        <el-option v-for="type in getList" :label="type.tname" :value="type.tid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评分" prop="date3" :label-width="formLabelWidth">
                    <el-input v-model="form.pscore" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="AddInfo()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        var nba = new Vue({
            el: "#app",
            data: {
                formInline: {
                    pname: '',
                    pscore: '',
                    pscore1: '',
                    tid: '',
                },
                getList: [],
                tableData: [],
                page: 1,
                limit: 10,
                count: 0,
                dialogFormVisible: false,
                form: {
                    pname: '',
                    ptime: '',
                    tid: '',
                    pscore: ''
                },
                rules: {
                    pname: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                onSubmit() {
                    this.GetPageList();
                },
                GetList() {
                    let _this = this;
                    axios.get('/Home/GetList')
                        .then(function (res) {
                            _this.getList = res.data;
                        }).catch(function (res) {

                        })
                },
                GetPageList() {
                    let _this = this;
                    axios.post('/Home/GetPageList', {
                        page: _this.page,
                        limit: _this.limit,
                        pname: _this.formInline.pname,
                        pscore: _this.formInline.pscore,
                        pscore1: _this.formInline.pscore1,
                        fid: _this.formInline.fid
                    }).then(function (res) {
                        console.log(res.data);
                        _this.tableData = res.data.data;
                        _this.count = res.data.count;
                    }).catch(function (err) {

                    })
                },
                handleSizeChange(val) {
                    this.limit = val;
                    this.GetPageList();
                },
                handleCurrentChange(val) {
                    this.page = val;
                    this.GetPageList();
                },
                AddInfo() {
                    let _this = this;
                    axios.post('/Home/AddInfo', _this.form)
                        .then(function (res) {
                            if (res.data.code == 0) {
                                _this.dialogFormVisible = false;
                                _this.GetPageList();
                                this.$message(res.data.msg);
                            } else {
                                this.$message(res.data.msg);
                            }

                        }).catch(function (ree) {

                        })
                }
            },
            created() {
                this.GetList();
            },
            mounted() {
                this.GetPageList();
            }
        })
    </script>
</body>
</html>
